<template>
    <view class="drop-down-wrap">
        <!-- 筛选栏区域开始 -->
        <view class="filter-tab-wrap">
            <view class="filter-tab-item" @click="selectFilterTabs(index)" v-for="(item, index) in filterList" :key="index">
                <text class="filter-tab-txt" :class="{active: currentIndex == index}">{{item.name}}</text>
                <text class="icon iconfont icon-shangjiantou active" v-if="currentIndex == index"></text>
                <text class="icon iconfont icon-xiajiantou1" v-else></text>
            </view>
        </view>
        <!-- 筛选栏区域结束 -->

        <!-- 筛选项区域开始 -->
        <view class="filter-wrap" v-if="filter?.type">
            <view class="filter-box">
                <!-- 类型筛选区域开始 -->
                <template v-if="filter.type == 'filter'">
                    <view v-for="(item, index) in filter.children" :key="index" class="filter-item" :class="filterValue == item.value ? 'actived' : ''" @click="changeFilter(item.name, item.value, filter.type)">
                        <text class="filter-txt">{{ item.name }}</text>
                        <text class="icon iconfont icon-duigou" v-if="filterValue == item.value"></text>
                    </view>
                </template>
                <!-- 类型筛选区域结束 -->

                <!-- 排序筛选区域开始 -->
                <template v-else-if="filter.type == 'sort'">
                    <view v-for="(item, index) in filter.children" :key="index" class="filter-item" :class="sortValue == item.value ? 'actived' : ''" @click="changeFilter(item.name, item.value, filter.type)">
                        <text class="filter-txt">{{ item.name }}</text>
                        <text class="icon iconfont icon-duigou" v-if="sortValue == item.value"></text>
                    </view>
                </template>
                <!-- 排序筛选区域结束 -->

                <!-- 综合筛选区域开始 -->
                <template v-else-if="filter.type == 'complex_filter'">
                    <slot></slot>

                    <!-- 按钮区域开始 -->
                    <view class="filter-btn">
                        <TridentButton @handleClick="reset" text="重 置" :width="200" bgColor="#ccc"/>
                        <TridentButton @handleClick="confirm" text="确 认" :width="200"/>
                    </view>

                </template>
                <!-- 综合筛选区域结束 -->
            </view>
        </view>
        <!-- 筛选项区域结束 -->
    </view>
</template>

<script lang="ts" setup>
import type { Filter } from '@/types/global'
import { ref } from 'vue'

// --------------- 定义全局变量开始 ---------------
const props = defineProps<{
    filterList: Filter[]
}>()

// 当前索引
const currentIndex = ref(-1)

// 过滤项
const filter = ref<Filter>()

const emit = defineEmits(['changeFilter', 'reset', 'confirm', 'selectFilterTabs'])

// 选择筛选tabs
const selectFilterTabs = (index: number) => {
    currentIndex.value = index
    filter.value = props.filterList[index]
    emit('selectFilterTabs')
}
// --------------- 定义全局变量结束 ---------------



// ----------------- 筛选功能开始 -----------------
// 类型筛选值
const filterValue: any = ref(0)

// 排序值
const sortValue: any = ref(0)

// 筛选改变时触发
const changeFilter = (name: string, value: string | number, filterType: string) => {
    switch (filterType) {
        case 'filter':
            filterValue.value = value
            break;
        case 'sort':
            sortValue.value = value
            break;
        default:
            break;
    }


    currentIndex.value = -1
    filter.value = undefined

    // 修改过滤类型
    props.filterList.forEach(item => {
        if (item.type == filterType) {
            item.name = name
        }
    })

    emit('changeFilter', {name, value, type: filterType})
}
// ----------------- 筛选功能结束 -----------------



// --------------- 综合筛选功能开始 ---------------
// 重置
const reset = () => {
    emit('reset')
}

// 确认
const confirm = () => {
    currentIndex.value = -1
    filter.value = undefined
    emit('confirm')
}
// --------------- 综合筛选功能结束 ---------------
</script>

<style scoped lang="scss">
.drop-down-wrap {
    // 筛选项区域开始
    .filter-tab-wrap {
        background-color: #fff;
        border-bottom: 2rpx solid #ccc;
        display: flex;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        z-index: 100;

        .filter-tab-item {
            flex: 1;

            .filter-tab-txt {
                margin-right: 10rpx;
            }
            .icon {
                font-size: 24rpx;
                color: #ccc;
            }

            .active {
                color: $uni-color-primary;
            }
        }
    }

    // 筛选内容区域开始
    .filter-wrap {
        background-color: rgba(0, 0, 0, 0.7);
        height: 100vh;
        transition: all 0.7s;
        position: absolute;
        z-index: 100;
        top: 90rpx;
        left: 0;
        width: 100%;
        .filter-box {
            background-color: #fff;
            // 下拉明细区域
            .filter-item {
                height: 80rpx;
                line-height: 80rpx;
                margin: 0 20rpx;
                border-bottom: 2rpx solid #f3f3f3;

                display: flex;
                justify-content: space-between;
                .filter-txt {
                    font-size: 24rpx;
                }
                &:last-child {
                    border-bottom: none;
                }
            }

            // 激活
            .actived {
                color: $uni-color-primary;
            }

            // 表单区域
            .filter-form {
                padding: 30rpx 25rpx 0 25rpx;
                border-bottom: 2rpx solid #e4e2e2;
            }

            // 按钮区域
            .filter-btn {
                display: flex;
                justify-content: space-evenly;
                padding-bottom: 20rpx;
            }
        }
    }
    // 筛选区域结束
}
</style>